<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:0':'paddingTop:1.2rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
      <div class="container">
        <div class="itembox">
          <div class="it rel" v-for="(item,k) in datainfo" :key="k" :class="{on:cid == k}" @click="sele(item,k)">
            <!--{{item}}-->
            <img :src="require('@/assets/images/dl_bg' + parseInt(k+1) + '.png')" alt="" v-if="k < 4">
            <div class="x"></div>
            <div class="abs">
              <div class="t db">
                <div class="ico"><img :src="item.iconUrl" alt=""></div>
                <div class="name flex">{{item.agencyName}}</div>
              </div>
              <div class="p" v-if="k == 0" :style="{marginTop:language=='en'?'-.25rem':''}">
                <img src="../../assets/images/dl_qb1.png" alt="" :style="{marginTop:language=='en'?'.2rem':''}"> {{item.desc}}
              </div>
              <div class="p" v-else-if="k == 1">
                <img src="../../assets/images/dl_qb4.png" alt="" :style="{marginTop:language=='en'?'.2rem':''}"> {{item.desc}}
              </div>
              <div class="p" v-else-if="k == 2">
                <img src="../../assets/images/dl_qb3.png" alt="" :style="{marginTop:language=='en'?'.2rem':''}"> {{item.desc}}
              </div>
              <div class="p" v-else-if="k == 3">
                <img src="../../assets/images/dl_qb2.png" alt="" :style="{marginTop:language=='en'?'.2rem':''}"> {{item.desc}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="b_h"></div>
      <div class="bottomBox">
        <div class="db">
          <div class="flex">
            <div class="s"><van-checkbox icon-size=".3rem" v-model="checked" checked-color="#043fd6"> {{$tc('reg.txt',1)}}</van-checkbox>
              </div>
            <p @click="docs()">{{$t('agent.doc14')}}</p>
          </div>
          <div class="str" @click="go">
            {{$t('agent.doc11')}} <span>{{cname}}</span>
          </div>
        </div>
      </div>


      <van-popup v-model="is_area" position="bottom" style="border-radius: .2rem .2rem 0 0">
        <div class="tname rel">
          {{$t('agent.doc12')}}
          <div class="abs" @click="is_area = false"><van-icon name="cross" /></div>
        </div>
        <ul class="a_list">
          <li class="db" v-for="(item,k) in areaData" :key="k" @click="area_ck(item)">
            <div class="flex">{{item.name}}</div>
          </li>
        </ul>
      </van-popup>



    </div>
</template>
<script>


  export default {
  data(){
    return {
      titleSize:this.$t('title.agent'),
      is_mt:true,
      cid:'0',
      checked:true,
      is_area:false,
      cname:'',
      datainfo:[],
      areaData:[],
      language:''

    }
  },
    // require
    created() {
      this.language=localStorage.getItem('language');
      this.$post(this.URL.agent.list,{
      }).then((res) => {
        if (res.code == 0) {
          this.datainfo = res.data;
          this.cname = this.datainfo[0].agencyName
        }
      });
      this.$post(this.URL.common.area,{
        pid:0
      }).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data;
        }
      });
    },
    mounted() {


    },
    methods: {
      sele(item,k){
        this.cid = k
        this.cname = item.agencyName
      },
      area_ck(item){
        this.$router.push({
          path: '/agent/area',
          query: {
            id: item.id
          }
        });
      },
      docs(){
        if (this.$store.state.isApp) {
        let appResult = {
          code: this.CMD.app.PROTOCOL,
          data: {},
        };
        this.common.callBackApp(appResult);
        return;
      }
        this.$router.push({
          path: '/doc/index',
          query: {
            type: 'AGENCY_AGREEMENT'
          }
        });
      },
      go(){
        if(!this.checked){
          this.$toast(this.$t('agent.doc13'));
          return
        }
        this.is_area = true
      }



    },


}

</script>


<style lang="less" scoped>
  #app {
    .container {
      padding: 0 .2rem .8rem .2rem;
    }
    .itembox {
      .it {
        margin-bottom: .2rem;
        > img {
          width: 100%;
        }
        .abs {
          width: calc(100% - .8rem);
          height: calc(100% - .6rem);
          top:0;left:0;
          padding: .3rem .4rem;
          .t {
            margin-bottom: .34rem;
            .ico {
              margin-right: .25rem;
            }
            img {
              height: 1rem;
              width: 1rem;
            }
            .flex {
              font-size: .4rem;
              font-weight: 500;
              color: #ffffff;
            }
          }
          .p {
            display: flex;
            opacity: 0.9;
            font-size: .24rem;
            font-weight: 400;
            color: #ffffff;
            line-height: .32rem;
            word-break: break-all;
            img {
              flex: 0 0 0.32rem;
              height: .32rem;
              margin: 0 .18rem 0;
            }
          }
        }
        &.on {
          .x {
            display: block;
          }
        }
        .x {
          position: absolute;top:0;left:0;
          width: 100%;
          height: 100%;
          border:2px solid #043fd6;
          border-radius: .16rem;
          background:url(../../assets/images/dl_on.png) no-repeat bottom right;
          display: none;
        }
      }
    }
    .b_h {
      height: 1.28rem;
    }
    .bottomBox {
      background: linear-gradient(-90deg,#053ac2 0%, #2295ed 100%);
      position: fixed;
      bottom:0;left:0;
      width: 100%;
      .flex {
        background: #fff;
        padding: .2rem .3rem;
        font-size: .24rem;
        p {
          margin-top: .1rem;
          color: #043fd6;
        }
      }
      .str {
        width: 50%;
        font-size: .24rem;
        color: #fff;
        padding: 0 .4rem;
        span {
          font-size: .32rem;
          color: rgba(255,222,0,1);
        }
      }
    }
  }
</style>
